<template>
    <div>
        <div class="operate center-flex-box" v-if="hasPermission('PAGE_USER_KEY_INFO')">
            <el-input placeholder="请输入内容" v-model="queryInfo.content" class="input-with-select item">
                <el-select v-model="queryInfo.mode" clearable slot="prepend" placeholder="请选择">
                    <el-option label="ID" value="ids"></el-option>
                    <el-option label="账号" value="accounts"></el-option>
                </el-select>
            </el-input>
            <div class="item center-flex-box">
                <el-checkbox v-model="queryInfo.checked">筛选状态</el-checkbox>
                <el-checkbox v-model="queryInfo.unlocked" :disabled="!queryInfo.checked">开放</el-checkbox>
            </div>
            <el-cascader
                class="item"
                placeholder="排序"
                expand-trigger="hover"
                :options="options"
                v-model="queryInfo.sort">
            </el-cascader>
            <el-button class="item" @click="obtainUserKeyInfos">查找</el-button>
        </div>
        <el-table
            v-if="hasPermission('PAGE_USER_KEY_INFO')"
            :data="accounts"
            stripe
            max-height="532"
            style="width: 100%">
            <el-table-column
                prop="id"
                label="ID"
                sortable
                width="180">
            </el-table-column>
            <el-table-column
                prop="account"
                label="账号"
                width="220">
            </el-table-column>
            <el-table-column
                prop="nickname"
                label="昵称"
                width="120">
            </el-table-column>
            <el-table-column
                prop="avatar"
                label="头像地址"
                width="300">
            </el-table-column>
            <el-table-column
                prop="createTime"
                label="创建时间"
                sortable
                width="160">
            </el-table-column>
            <el-table-column
                prop="updateTime"
                label="更新时间"
                sortable
                width="160">
            </el-table-column>
            <el-table-column
                prop="lastLoginTime"
                label="最后登录时间"
                sortable
                width="160">
            </el-table-column>
            <el-table-column
                v-if="hasPermission('CHANGE_USER_LOCK_STATUS')"
                fixed="right"
                label="状态">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.unlocked" @click="locked(scope.row.id,false)" type="success" size="mini"
                               plain>正常
                    </el-button>
                    <el-button v-else @click="locked(scope.row.id,true)" type="danger" size="mini" plain>锁定</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageInfo.page"
            :page-size="pageInfo.size"
            layout="total, prev, pager, next, jumper"
            :total="pageInfo.total">
        </el-pagination>
    </div>
</template>

<script>
    import { mapGetters, mapActions } from 'vuex'
    import { convertTime } from '@/utils/date'

    export default {
        name: 'accountManagement',
        data () {
            return {
                accounts: [],
                pageInfo: {
                    page: 1,
                    size: 100,
                    total: 0
                },
                queryInfo: {
                    mode: '',
                    content: '',
                    checked: false,
                    unlocked: false,
                    sort: []
                },
                options: [{
                    label: '无',
                    value: 'none'
                }, {
                    label: 'ID',
                    value: 'id',
                    children: [{
                        label: '正序',
                        value: 'asc'
                    }, {
                        label: '倒序',
                        value: 'desc'
                    }]
                }, {
                    label: '账号',
                    value: 'account',
                    children: [{
                        label: '正序',
                        value: 'asc'
                    }, {
                        label: '倒序',
                        value: 'desc'
                    }]
                }, {
                    label: '状态',
                    value: 'unlocked',
                    children: [{
                        label: '正序',
                        value: 'asc'
                    }, {
                        label: '倒序',
                        value: 'desc'
                    }]
                }]
            }
        },
        mounted () {
            this.obtainUserKeyInfos()
        },
        computed: {
            ...mapGetters({
                hasPermission: 'user/hasPermission'
            })
        },
        methods: {
            ...mapActions({
                pageUserKeyInfoAction: 'user/pageUserKeyInfo',
                changeLockStatusAction: 'user/changeLockStatus'
            }),
            convert (date) {
                return convertTime(date)
            },
            handleSizeChange (val) {
                this.pageInfo.size = val
                this.obtainUserKeyInfos()
            },
            handleCurrentChange (val) {
                this.pageInfo.page = val
                this.obtainUserKeyInfos()
            },
            obtainUserKeyInfos () {
                this.action(this.pageUserKeyInfoAction(this.obtainQuery()), data => {
                    if (data.data) {
                        this.accounts = data.data.records
                        this.accounts.forEach(account => {
                            account.createTime = convertTime(account.createTime)
                            account.updateTime = convertTime(account.updateTime)
                            account.lastLoginTime = convertTime(account.lastLoginTime)
                        })
                        this.pageInfo.total = data.data.total
                    } else {
                        this.accounts = []
                    }
                })
            },
            obtainQuery () {
                let query = {
                    page: this.pageInfo.page,
                    size: this.pageInfo.size,
                    unlocked: this.queryInfo.checked ? this.queryInfo.unlocked : null
                }
                if (this.queryInfo.sort.length === 2) {
                    query[this.queryInfo.sort[1]] = this.queryInfo.sort[0]
                }
                query[this.queryInfo.mode] = this.queryInfo.content
                return query
            },
            locked (userId, unlocked) {
                this.action(this.changeLockStatusAction({ userId, unlocked }), data => {
                    this.$message.success('修改成功')
                    this.accounts.find(account => account.id === userId).unlocked = unlocked
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import '../../../../../style/scss';

    .operate {
        height: 60px;
        width: 90%;
        padding: 0 5%;

        .item {
            margin: 24px;
        }

        .input-with-select {
            width: 360px;
            background-color: #fff;

            .el-select {
                width: 100px;
            }
        }
    }
</style>
